<template>
  <div class="my-check-box">
    <label :for="id" class="my-check-box-lbl">
      <input :id="id" type="checkbox" v-bind="$attrs" @click="doCheck" />
      <span class="icon"></span>
    </label>
    <span class="text">
      <slot></slot>
    </span>

  </div>
</template>

<script>
export default {
  name: 'MyCheckBox',
  inheritAttrs: false, // 关闭继承
  props: {
    id: [Number,String]
  },
  methods: {
    doCheck() {
      this.$emit('click', this.id)
    }
  }
}
</script>

<style lang="less" scope>
  .my-check-box {
    display: block;

    .my-check-box-lbl {
      display: inline-block;
      position: relative;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid #333;
      margin-right: 5px;
      vertical-align: -5px;

      input {
        visibility: hidden;

        &:checked + .icon {
          display: block;
        }
      }

      .icon {
        display: none;
        position: absolute;
        left: 3px;
        top: 3px;
        width: 6px;
        height: 6px;
        background-color: blue;
        border-radius: 50%;
      }
    }
  }
</style>